<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">

    <link rel="stylesheet" type="text/css" href="/lib/iview/iview.css">
    <link rel="stylesheet" type="text/css" href="/css/global.css">

    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/zepto.min.js"></script>
    <script type="text/javascript" src="/lib/iview/iview.min.js"></script>
    <script type="text/javascript" src="/js/vue-components.js"></script>
    <script type="text/javascript" src="/js/public.js"></script>
    <script type="text/javascript" src="/js/baiduMap/polygonPoint.js"></script>

    <title>茂名网格小区划分_百度地图</title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
        #but_control{height:0%}

    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=2v5EsIZLnz6ua5W5UDmjlgkG">
        //v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
    </script>

</head>

<body>
<div id="app">
    <div id="but_control" class="g-dg-search-banner" >


    </div>

<div id="container" style="border:1px solid gray"></div>
</div>
<script type="text/javascript">
    //把字符串转换成点数组 x,y|x,y|x,y
    function strToPoints(pstr){
        if(pstr == null || pstr.length<=2){
            return [];
        }
        var points = [];
        var idx = 0;
        var ps = pstr.split("|");
        for(var i = 0;i < ps.length;i++){
            var p = ps[i];
            if(p==null || p.length<2){
                continue;
            }
            var _p = p.split(",");
            try{
                if(_p.length==2 && _p[0].length>0&&_p[1].length>0){
                    points.push(new BMap.Point(parseFloat(_p[0]), parseFloat(_p[1])));
                }
            }catch(e){}
        }
        return points;
    }

    //把点数组转换成字符串 x,y|x,y|x,y
    function pointsTostr(ps){
        var retstr = "";
        for(var i=0;i<ps.length;i++){
            var p = ps[i];
            retstr+= p.lng+","+p.lat+"|";
        }
        return retstr;
    }
</script>


<script type="text/javascript">
    var map = new BMap.Map("container");
    // 创建地图实例
    var point = new BMap.Point(110.946928,21.663135);
    // 初始化地图,设置中心点坐标和地图级别
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
    ]}));
    map.setCurrentCity("茂名");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    // 创建点坐标
    //map.setCurrentCity("茂名");
    map.centerAndZoom(point, 15);
    // 初始化地图，设置中心点坐标和地图级别

    var styleOptions = {
        strokeColor:"red",    //边线颜色。
        fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 2,       //边线的宽度，以像素为单位。
        strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
        fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
        strokeStyle: 'solid' //边线的样式，solid或dashed。
    }





    // 1 星星；2 桃心；3 圆形；4 正方形；
    //星星
    var options_STAR = {
        size: BMAP_POINT_SIZE_SMALL,
        shape: BMAP_POINT_SHAPE_STAR,
        color: '#d30e0a'
    }

    //方形
    var options_SQUARE = {
        size: BMAP_POINT_SIZE_SMALL,
        shape: BMAP_POINT_SHAPE_SQUARE,
        color: '#5507d3'
    }

    //圆形
    var options_CIRCLE = {
        size: BMAP_POINT_SIZE_SMALL,
        shape: BMAP_POINT_SHAPE_CIRCLE,
        color: '#06d3cf'
    }

    //菱形
    var options_RHOMBUS = {
        size: BMAP_POINT_SIZE_SMALL,
        shape: BMAP_POINT_SHAPE_CIRCLE,
        color: '#d30b06'
    }




    const m_apis = {
        layer_save() {
            return PB.apiRoute('/api/map/mapcfgarea/findPage?queryChangeModel=1&id=', 'GET');
        },
        layer_listAll() {
            return PB.apiRoute('/api/map/mapcfglayer/findPage?pageNo=1&pageSize=10000', 'GET');
        },
        layer_findArea(layerId) {
            return PB.apiRoute('/api/map/mapcfgarea/findPage?pageNo=1&pageSize=10000&layerId='+layerId, 'GET');
        },
        area_save() {
            return PB.apiRoute('/api/map/mapcfgarea/save', 'GET');
        }
    };

    let vm = new Vue({
        el: '#but_control',
        data() {
            return {
                apis: m_apis,
                title: '工单列表',
                page: 1,
                pageSize: 10,
                searchForm: {
                    plevel: 0,
                    statetype: 'XD_ALL',
                    orderby: 'crtTime desc',
                    queryChangeModel: 1,
                    LayerId:0
                },
                mapCfgLayer:[],
                mapCfgArea:[],
                polygons:[],
                searchDate: ['', ''],
                ruleValidate: {
                    /*cmMobile: [
                     {required: true, message: '请输入客户号码查询', trigger: 'blur'}
                     ]*/
                },
                total: 0,
                dtData: [],
                dtCols: []
            }
        },
        created(){
            this.loadData();
            this.layerChange(1);
        },
        computed: {
            getTableHeight(){
                //return (window.innerHeight - 150);
            }
        },
        methods: {
            loadData () {

            },
            layerChange(value){
                let that = this;
                PB.ajax(this.apis.layer_findArea(1), function (d) {
                    that.mapCfgArea = d.data;
                    for(var i=0;i<vm.mapCfgArea.length;i++){
                        var area = vm.mapCfgArea[i];
                        //多边形
                        if(area.areaType=="polygon"){
                            if(area.areaBorderBaidu!=null && area.areaBorderBaidu.length>0){

                                var ps = strToPoints(area.areaBorderBaidu);
                                area.areaBorderbaiduPoints = ps;
                            }
                            //在地图上画多边形
                            if(area.areaBorderbaiduPoints&&area.areaBorderbaiduPoints.length>0){

                                var polygon =new BMap.Polygon(area.areaBorderbaiduPoints,{strokeColor:"red", strokeWeight:3, strokeOpacity:0.5,fillOpacity:0.2});
                                //var polygon = createAreaOverlay(area.areaBorderbaiduPoints);
                                polygon.name = area.name;
                                polygon.id = area.id;
                                //polygon.areaType = area.areaType;
                                polygon.addEventListener("click",function(){
                                    var _n = this.name;
                                    alert("当前区域为：" + _n);
                                });
                                //
                                var cenpoint = polygon.getBounds().getCenter()
                                var label_opts = {
                                    position : cenpoint,    // 指定文本标注所在的地理位置
                                    offset   : new BMap.Size(-30, -0)    //设置文本偏移量
                                }
                                var label = new BMap.Label(polygon.name, label_opts);  // 创建文本标注对象
                                label.setStyle({
                                    color : "#5507d3",
                                    fontSize : "12px",
                                    border :"0",
                                    //backgroundColor:"transparent",
                                    //height : "20px",
                                    //lineHeight : "20px",
                                    fontFamily:"微软雅黑"
                                });
                                //map.addOverlay(label);
                                //创建右键菜单
                                map.addOverlay(polygon);   //增加多边形
                            }
                        }
                    }
                });
            },
        }
    })
</script>
</body>
</html>